<template>

    <div>
      <div style='width: 100%;height: 100%'>
        <div class='pic'>
          <van-swipe :autoplay="2000" style='height:200px'>
            <van-swipe-item v-for="(item, index) in imglist" :key="index">
              <img  style='height:200px;width: 100%' :src="item.src" />
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <div class='intro'>
        <van-panel >
          <div class='title'>白泉古村</div>
          <div class='content' style='margin: 0 10px 0 12px'>
            “百牛饮尽白泉水”。白泉村在唐时就已建村，当时村东山间石崖下泉水众多，洁白如练，故取村名为白泉。
            村内保存下来的古建筑有北极台、举人楼、绣楼、张氏祠堂等，村内禹王庙殿内壁画为清宣统年间绘制，
            有花瓶、宝扇、渔鼓、书卷等，还描绘了春、夏、秋、冬四季美景和农家生活。
          </div>
          <!--<div style='width: 40%;margin:-30px 30%' @click='ReadMore'>-->
            <!--<van-button size="small" style='width:100%;margin: auto'>查看更多</van-button>-->
          <!--</div>-->
        </van-panel>
      </div>
      <div class='wenwu'>
        <div class='title' style='font-size: 16px;font-weight:bold;background: white'>
          <div><b>附近停车场</b></div>
          <van-field  v-model="searchKM" placeholder="选择搜索范围(默认1km)" error-message="" readonly @click.native='shownDist();' class='bound-veh-field-picker'/>
        </div>
        <div class='wlist' style=' padding-left: 10px;'>
          <van-cell-group>

            <van-cell v-for="(item,index) in parkList" :title="item.parkName" style='font-size:15px'>
              <div class='icon-group'>
                <div class='icon-iten yuyue' @click='reservePark' :data-index="index">
                  <van-icon name="clock" size="2em" color="#4798FD" />
                  <b>预约</b>
                </div>
                <div class='icon-iten daohang' @click="MapDirect">
                  <van-icon name="share" size="2em" color="#4798FD" />
                  <b>导航</b>
                </div>
              </div>
            </van-cell>

          </van-cell-group>
        </div>
      </div>
      <!--预约选择弹层-->
      <van-popup v-model="chooseMap" style='border-radius: 8px' >
        <van-list style='width: 200px;'>
          <van-cell  style="text-align: center;border-bottom: 1px solid #26C4FE" title="百度地图" @click='chooseMapDirt(1)' />
          <van-cell  style="text-align: center;border-bottom: 1px solid #26C4FE" title="腾讯地图" @click='chooseMapDirt(2)'/>
          <van-cell  style="text-align: center" title="高德地图" @click='chooseMapDirt(3)' />
        </van-list>
      </van-popup>
      <!--检索距离弹层-->
      <van-popup v-model="showDistance" style='width:90%'>
        <van-picker ref='boundVehicleSelectPlateColor'  show-toolbar title="选择搜索范围" :columns="columns" @cancel="hidenDist()" @confirm="okDist" />
      </van-popup>
    </div>
</template>

<script>
  import { nearParkInfo,getBaiduCoordinates,findWxUserInfo,saveGuidancePark} from '../../api/nearPark/nearPark'
  import  geo from '../../utils/geolocation'
  import {baseUrl} from 'config/index'
  import { Toast } from 'vant';
  import { Dialog } from 'vant';
  let geolocation = new geo("FYXBZ-5YDCW-ILWRQ-OOWLM-AJV7Z-QNFH7", "ZQwechat");
    export default {
        name: "baiQunCun",
      data() {
        return {
          imglist:[
            { src: require('./image/cun1.jpg') },
            { src: require('./image/cun2.jpg') },
            { src: require('./image/cun3.jpg') },
          ],
          ZQcode:'',
          DHOpenid:'', // 导航记录
          DHPkNo:'', // 导航车场编号
          DHPKName:'', // 导航车场名称
          parkList:'', //车场信息
          chooseMap:false,
          startpaoint:'',//起点
          startPointGD:'',// 起点 高德
          startPointBD:'',//百度起点
          startCityBD:'', //起点城市
          endPointBD:'', //终点 百度
          endPoint:'',//终点 腾讯坐标
          endPointGD:'', //终点 高德坐标
          endPlacename:'',
          showDistance: false,
          searchKM:'', //搜索距离
          seachKMKey:'',
          columns:[
            { text: '搜索附近 1km   ',key:'1'} ,
            { text: '搜索附近 2km   ',key:'2'} ,
            { text: '搜索附近 3km   ',key:'3'} ,
            { text: '搜索附近 4km   ',key:'4'},
          ],
        };
      },
      mounted(){
        this.ZQcode=this.$route.query.code   //章丘code
        // ---用户信息
        findWxUserInfo(this.ZQcode).then((res)=>{
          this.DHOpenid=res.openid
        },(err)=>{
          console.log(err)
        })
        // 附近车场
        this.getNearPark()
        //定位
        this.MapGetLoation()
      },
      methods: {
        // 获取当前定位
        MapGetLoation() {
          geolocation.getLocation(this.getLoationOK, this.getLoationErr)
        },
        // 定位成功回调
        getLoationOK(position) {
          // ---根据坐标查询车场
          this.startpaoint=position.lat+','+position.lng  //当前点
          this.startPointGD=position.lng+','+position.lat  //高德坐标
          //---获取起点坐标  百度系
          getBaiduCoordinates(position.lng,position.lat).then((res)=>{
            this.startPointBD=res.lat+','+res.lng
          },(err)=>{
            // alert('请刷新页面重试')
          })
          //---获取地点所在地区
          this.startCityBD=position.city
        },
        // 定位失败回调
        getLoationErr(){
          Toast.fail('定位失败'); //提示
        },
        //---周边车场
        getNearPark(){ // 百脉泉坐标 腾讯坐标
          nearParkInfo(117.536493,36.677233,1.00).then((res)=>{
            this.parkList=res
          })
        },
        //---- 预约车场
        reservePark(e){
          var _index=e.currentTarget.dataset.index
          //预约前判断
          //- 判断车场是否能预约
          if (this.parkList[_index].canBook==1 ) {
            Toast.fail('不支持预约')
            return;
          }else if(this.parkList[_index].remainderBerth<=0){
            Toast.fail('没有泊位了')
            return
          }
          //--- 页面跳转前判断用户信息
          var that=this
          findWxUserInfo(this.ZQcode).then((res)=>{
            if(res.phoneNo==null ){  //如果手机号为空
              Dialog.confirm({
                title: '未绑定手机号',
                message: '<p style="text-align:center">当前微信未绑定手机号，是否绑定</p>',
              }).then(() => {
                // on confirm
                that.$router.push({  // 跳转到绑定手机号页面
                  path:'/ReserveBindNo',
                  query:{
                    code:that.ZQcode,
                    openid:res.openid
                  }
                })
              }).catch(() => {
                // on cancel
                return
              });
            }else if(!(res.haveBindCar)){   //如果未绑定车辆
              Dialog.confirm({
                title: '未绑定车辆',
                message: '<p style="text-align:center">当前微信未绑定车辆。是否绑定</p>',
              }).then(() => {
                // on confirm
                that.$router.push({
                  path:'/ReserveBindCar',  //跳转绑车页面
                  query:{
                    code:that.ZQcode,
                    openid:res.openid
                  }
                })
              }).catch(() => {
                // on cancel
                return
              });
            }else{  // 绑定信息  下一步
              // 页面跳转
              var  _codeUrl='http://wx.jinanparking.com/getCode.html?appid=wx7305253d6ea42110&scope=snsapi_base&state=wxPay&redirect_uri='
              var _redirectUrl=baseUrl+'/reservePark'
              var arr={
                parkNO:this.parkList[_index].parkNo,  //车场编号
                parkName:this.parkList[_index].parkName,  //车场编号
                getZQCode:this.ZQcode
              }
              var _params='?parkInfo='+JSON.stringify(arr)
              var _url=_codeUrl+_redirectUrl+_params
              window.location.href=_url
            }
          },(err)=>{  //如果页面么有code
            Toast.fail('刷新重试')
          })

        },
        //-- 导航
        MapDirect(e){
          this.chooseMap=true
          var _index=e.currentTarget.dataset.index
          this.DHPkNo=this.parkList[_index].parkNo
          this.DHPKName= this.parkList[_index].parkName
          this.endPoint = this.parkList[_index].latitude + ',' + this.parkList[_index].longitude; // 腾讯系 坐标
          this.endPointBD = this.parkList[_index].baiduLatitude + ',' + this.parkList[_index].baiduLongitude; // 百度系 坐标
          this.endPointGD = this.parkList[_index].longitude + ',' + this.parkList[_index].latitude; // 高德度系 坐标
          this.endPlacename = this.parkList[_index].parkName;
        },
        //---选择地图导航
        chooseMapDirt(key){
          //--- 上传导航记录  /{openId}/{parkNo}
          if(this.DHOpenid!=null){  //有openid
            saveGuidancePark(this.DHOpenid,this.DHPkNo,this.DHPKName).then()
          }
          switch (key){
            case 1:  //百度地图
              window.location.href='http://api.map.baidu.com/direction?origin='+this.startPointBD+'&origin_region='+this.startCityBD
                +'&destination='+this.endPointBD+'&destination_region=济南' +'&mode=driving&output=html&src=th.zq'
              break;
            case 2:
              window.location.href ='https://apis.map.qq.com/uri/v1/routeplan?type=drive&fromcoord=' +
                this.startpaoint + '&to=' + this.endPlacename + '&tocoord=' + this.endPoint + '&referer=ZQwechat'
              break;
            case 3:
              window.location.href='https://uri.amap.com/navigation?from='+this.startPointGD+ '&to='+this.endPointGD+
                '&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0'
              break;
          }
        },
        // 开启距离弹层
        shownDist(){
          this.showDistance=true;
        },
        // 关闭距离弹层
        hidenDist(){
          this.showDistance=false;
        },
        //确定距离
        okDist(value){
          this.searchKM=value.text
          //--查询数据
          nearParkInfo(117.538150,36.717260,value.key).then((res)=>{
            this.parkList=res
          })
          this.showDistance=false;
        },
      }
    }
</script>

<style scoped>
  .title{
    font-size: 20px;
    height: 24px;
    line-height: 24px;
    margin: 15px auto;
    margin-left: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .content{
    font-size: 13px;
    line-height: 25px;
    text-indent:2em;
    word-break:break-all;
  }
  .wenwu{
    margin-top: 40px;
    margin-bottom: 40px;
  }
  .icon-group{
    display: flex;
    flex-direction: row;
    justify-content: center;
    justify-items: center;
  }
  .icon-iten{
    margin: 5px;
    font-size: 15px;
    color:#4798FD;
  }
  .yuyue{
    margin-right: 8px;
  }
  .daohang{
    margin-left: 8px;
    margin-right:-20px;
  }
  .bound-veh-field-picker{
    padding: 0px;
    display: inline-block;
    width: 46%;
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
  }
</style>
